import React, { Component } from 'react'
import { Button, Col, Icon, Row, Table } from 'antd'
import '../../less/index.less'
import '../../less/program-list.less'
import { connect } from 'react-redux'
import { Link, withRouter } from 'react-router-dom'
import EditableCell from '../common/editable-cell'
import * as actions from '../../actions/progarm'
import SelectStatus from '../common/select-status-cell'
import { TwsReactMarkdownEditor } from 'tws-antd'
import { getUploadUrl } from '../../constant/upload-url'
import { FormattedMessage } from 'react-intl'

class ProgramWorkspace extends Component {
  constructor () {
    super()
    this.state = {
      expandIconAsCell: false,
      expandRowByClick: true,
      expandedRowKeys: [],
      introduction: '',
      introductionIcon: 'edit',
      editId: 0,
      deleteProgram: '',
      page: 1,
      pageSize: 20
    }
  }

  onChange (page, pageSize) {
    this.setState({page})
    this.props.getPrograms(page, pageSize)
  }

  handleAdd () {
    const newProgram = {
      title: ` `,
      startTime: null,
      endTime: null,
      category: '付费'
    }
    this.setState({page: 1})
    this.props.addProgram(newProgram)
  }

  onCellChange (value, type, program) {
    program[type] = value
    const {page, pageSize} = this.state
    this.props.editProgram(program, page, pageSize)
  }

  changeShow (programId) {
    return '/program/' + programId
  }

  addIntroduction (program) {
    this.setState({
      expandedRowKeys: [],
      introductionIcon: 'edit',
      introduction: ''
    })
    const introduction = this.state.introduction ? this.state.introduction : program.introduction
    this.onCellChange(introduction, 'introduction', program)
  }

  switchIcon (record) {
    if (this.state.introductionIcon === 'check' && record.id === this.state.editId) {
      return <Icon type='check' onClick={this.addIntroduction.bind(this, record)} />
    } else {
      return <Icon type='edit' onClick={this.operateIntroduction.bind(this, record)} />
    }
  }

  operateIntroduction (record) {
    this.onExpandedRowsChange(record)
    this.setState({
      introductionIcon: 'check',
      editId: record.id
    })
  }

  onExpandedRowsChange (rows) {
    this.setState({
      expandedRowKeys: [rows.id]
    })
  }

  getIntroduction (introduction) {
    this.setState({introduction})
  }

  expandedRowRender (settings, record) {
    return <div>
      <TwsReactMarkdownEditor
        action={getUploadUrl(settings.appContextPath)}
        value={record.introduction} onChange={this.getIntroduction.bind(this)} />
      <Button type='primary' className='margin-t-2' onClick={this.addIntroduction.bind(this, record)}><FormattedMessage id='提交' /></Button>
    </div>
  }

  render () {
    let {workspacePage, settings} = this.props
    const programList = workspacePage.content
    const {expandRowByClick, expandIconAsCell, expandedRowKeys} = this.state

    const optionals = ['付费', '免费']
    const columns = [{
      title: <FormattedMessage id='名称' />,
      dataIndex: 'title',
      render: (text, record) => {
        return (
          <EditableCell
            isProgram
            isReadOnly={record.readOnly}
            value={text}
            id={record.id}
            linkUrl={this.changeShow(record.id)}
            onChange={value => this.onCellChange(value, 'title', record)}
          />
        )
      }
    },
    {
      title: <FormattedMessage id='训练营介绍' />,
      dataIndex: 'introduction',
      render: (text, record) => {
        return <Row>
          <Col span={22} className='col' style={{width: 150}}>
            <span>{text}</span>
          </Col>
          {
            record.readOnly
            ? ''
            : <Col span={1} offset={1} style={{float: 'right'}}>
              {this.switchIcon(record)}
            </Col>
          }
        </Row>
      }
    },
    {
      title: <FormattedMessage id='类型' />,
      dataIndex: 'category',
      render: (text, record) => (
        <SelectStatus
          value={text}
          disable={record.readOnly}
          id={record.id}
          onChange={value => this.onCellChange(value, 'category', record)}
          optionals={optionals}
          />
        )
    },
    {
      title: <FormattedMessage id='操作' />,
      dataIndex: 'operation',
      render: (text, record) => {
        return (
          <span>
            <span>
              <Link to={this.changeShow(record.id)}><FormattedMessage id='进入训练营' /></Link>
            </span>
            <span className='ant-divider' />

            <span>
              <a href='' onClick={() => this.props.deleteMyWorkspace(record.id)}><FormattedMessage id='从我的工作区移除' /></a>
            </span>
          </span>

        )
      }
    }]
    const pagination = {
      current: this.state.page,
      total: workspacePage.totalElements,
      pageSize: 20,
      onChange: (page) => {
        this.onChange(page, this.state.pageSize)
      }
    }

    return (
      <Table className='programList-table' bordered dataSource={programList} columns={columns}
        expandRowByClick={expandRowByClick}
        expandIconAsCell={expandIconAsCell}
        expandedRowKeys={expandedRowKeys}
        expandedRowRender={this.expandedRowRender.bind(this, settings)}
        rowKey={record => record.id}
        pagination={pagination}
        />
    )
  }
}

const mapStateToProps = state => ({
  settings: state.settings
})
const mapDispatchToProps = dispatch => ({
  deleteMyWorkspace: (programId) => dispatch(actions.deleteMyWorkspace(programId))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProgramWorkspace))
